<template>
    <section>
        <a href="javascript:;" class="file">选择文件
        <input :id="id" class="f1" type="file" @change="fileChange" size="30" name="fileselect[]" multiple />
        </a>
    </section>
</template>
<script src="./file.js">

</script>
<style lang="scss" scoped>
    .file {
        position: relative;
        display: inline-block;
        background: #D0EEFF;
        border: 1px solid #99D3F5;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #1E88C7;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
    }

    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }

    .file:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }
</style>